import React from 'react';
import { connect } from 'dva';
import { Form, Input, Divider, Modal } from 'antd';

const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
};


@connect(({ testrecord, project, user, loading }) => ({
  loading: loading.models.testrecord
}))
  export default Form.create()(
    class extends React.PureComponent {

      handleCancel = () => {
        this.props.onCancel();
        this.props.form.resetFields();
      };

      handleOK = (e) => {
        const form = this.props.form;
        form.validateFields((err, values) => {
          let payload = {
            id:this.props.record.activeTestRecordId,
            name:this.props.record.projectName,
            version:this.props.record.versionName,
            reason:values.reason
          }
          if (err) {
            return;
          }
          if (!err) {
            switch (this.props.sign){
              case 1: 
                this.props.dispatch({
                  type: 'testrecord/pmCheckFail',
                  payload:payload
                })
                break;
              
              case 2:
              this.props.dispatch({
                type: 'testrecord/testCheckFail',
                payload:payload
              })
              break;  
            }
           
            this.props.onCancel();
          }
          this.props.form.resetFields();
        });
      };

      tips = (sign,record) =>{
        switch (sign){
          case 1 :
            return(
              <div>
                <p>项目版本：{`${record.projectName}-${record.versionName}`}</p>
                <p>1. 请查看提测版本的功能是否完整</p>
                <p>2. 请查看提测版本的文案是否正确</p>
              </div>
            );
            
          
          case 2:
            return(
              <div>
                <p>项目版本：{`${record.projectName}-${record.versionName}`}</p>
                <p>1. 请查看开发是否自测通过</p>
                <p>2. 快速验证基本功能（15-30min内完成，若验证未通过，务必打回）</p>
              </div>
            );
            
        }    
      }

      render() {
        const { data } = this.props;
        const { getFieldDecorator } = this.props.form;
        return (
          <Modal
            visible={this.props.visible}
            title="打回"
            okText="确定"
            cancelText="取消"
            destroyOnClose={true}
            onCancel={this.handleCancel}
            onOk={this.handleOK}
            width={595}
          >
            {this.tips(this.props.sign,this.props.record)}
            <Form layout="horizontal" >
              <Form.Item label = '打回原因'>
                {
                  getFieldDecorator('reason', {
                    rules: [{ 
                      required: true ,
                      message: '请输入打回原因',
                    }],
                  })
                    (<TextArea 
                      autosize={{ minRows: 3 }}
                      placeholder="请输入打回" />)
                }
              </Form.Item> 
            </Form>
          </Modal>
        );
      }
    }
  );
